import React from 'react';
import {Modal, View, Image, findNodeHandle, UIManager, TouchableOpacity, Dimensions} from 'react-native';
import Tag from "../ant-copy/tag/Tag";

const {width, height} = Dimensions.get('window');


export default class FlowModal extends React.Component {

  static defaultProps = {
    disabled: false,
    small: false,
    selected: false,
    closable: true,
    onClose() {
    },
    afterClose() {
    },
    onChange() {
    },
    data: ['小狗', '小猫', '小猪', '小狗', '小猫', '小猪', '小狗', '小猫', '小猪', '小狗', '小猫', '小猪',],
  }

  state = {
    modalShow: false,
    modalPosition: {},
    data: this.props.data || [],
  }

  data = [];

  openModal = () => {
    if (!this.btnRef) return;

    const handle = findNodeHandle(this.btnRef);

    UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
      this.setState({
        modalShow: true,
        modalPosition: {
          x, y, width, height, pageX, pageY
        }
      });
    });
  }

  addRef = (ref) => {
    this.btnRef = ref
  }

  closeModal = () => {
    this.setState({
      modalShow: false,
    });
  }

  render() {

    const {modalShow, modalPosition} = this.state;

    return (
      <View style={{width:10,height:20}}>
        <TouchableOpacity
          onPress={this.openModal}
          ref={this.addRef}
        >
          <Image
            resizeMode={'stretch'}
            source={require('./img/icon_back_gray.png')}
          style={{width:10,height:20}}/>
        </TouchableOpacity>

        <Modal
          visible={modalShow}
          onRequestClose={this.closeModal}
          transparent={true}
        >
          <View
            onStartShouldSetResponder={() => true}
            onResponderRelease={this.closeModal}
            style={{
              flex: 1,
              backgroundColor: 'rgba(0,0,0,0.5)',
            }}
          >
            <View style={{
              width: width,
              backgroundColor: '#fff',
              marginTop: modalPosition.pageY + modalPosition.height,
              // marginLeft: modalPosition.pageX,
              flexDirection:'row',
              flexWrap:'wrap',
              padding:20,
            }}
            >
              {
                this.state.data.map((item, index) => {
                  return (
                    <Tag
                      style={{marginHorizontal: 8, marginVertical: 4}}
                      disabled={this.props.disabled}
                      small={this.props.small}
                      selected={this.props.selected}
                      closable={this.props.closable}
                      onClose={() => this.onClose(index)}
                      afterClose={this.props.afterClose && this.props.afterClose(item)}
                      onChange={this.props.onChange && this.props.onChange(item)}
                      key={index}>{item}</Tag>)
                })
              }
            </View>
          </View>
        </Modal>
      </View>
    )
  }
}
